<template>
		<el-dialog title="授权码" v-model="state.dialog.isShowDialog" width="800px" :before-close="closeDialog">
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" border size="small">
				<el-table-column type="index" label="序号" align="center" width="70" />
				<el-table-column prop="autocode" label="授权码" align="center" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="isuse" label="是否使用" align="center" show-overflow-tooltip width="100">
          <template #default="scope">
						<el-tag type="success" v-if="scope.row.isuse">是</el-tag>
						<el-tag type="info" v-else>否</el-tag>
					</template>
        </el-table-column>
				<el-table-column prop="usertime" label="使用时间" align="center" show-overflow-tooltip width="180">
          <template #default="scope">
						<div v-if="scope.row.usertime">{{ formatDate(new Date(scope.row.usertime),'YYYY-mm-dd HH:MM:SS') }}</div>
					</template>
        </el-table-column>
			</el-table>
			<!-- 分页组件 -->
			<Pagination 
				class="mt15"
        :small="true"
				:total="state.tableData.total"
				:page="state.tableData.param.pageNum"
				:limit="state.tableData.param.pageSize"
				@pagination="pageChange"
			/>
		</el-dialog>
</template>

<script setup lang="ts" name="systemCodeList">
import { formatDate } from '/@/utils/formatTime';
// 后台接口
import { systemApi } from '/@/api/system/index';

// 定义变量内容
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
      telphone: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
  dialog: {
    isShowDialog: false,
  },
});

// 打开弹窗
const openDialog = (telphone: string) => {
	state.dialog.isShowDialog = true;
  state.tableData.param.telphone = telphone
  getTableData();
}
// 关闭弹窗
const closeDialog = () => {
  state.tableData.data = [];
  state.tableData.total = 0;
	state.dialog.isShowDialog = false;
}
// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;
	let res = await systemApi().getCodeList(state.tableData.param)
	state.tableData.data = res.datas.list;
	state.tableData.total = res.datas.count;
	state.tableData.loading = false;
};
// 分页组件改变
const pageChange = (pageObj: {pageNum:number,pageSize:number}) => {
	state.tableData.param.pageNum = pageObj.pageNum;
	state.tableData.param.pageSize = pageObj.pageSize;
	getTableData();
}
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
